.van-nav-bar {
    
    .van-nav-bar__title,
    .van-icon {
        color: #fff;
    }
    .van-nav-bar__content {
        background-color: #3296fa;
    }
    .van-button--info {
        background-color: #3296fa;
    }
}

#app {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

// .container是Layout.vue组件的根元素的类名
.container {
    width: 100%;
    height: 100%;
}

// .index 是home/home.vue组件的根元素的类名
.index {
    padding-top: 46px;
    height: 100%;
// 让出顶部导航条的距离
// 顶部在导航条是固定定位的
// #app >.container >.index > .van-tabs > van-tabs__wrap + van-tabs__content
.van-tabs {
    padding-top:50px; 
    display: flex;
    flex-direction: column; //换轴
    height: 100%;
    .van-tabs__wrap {
    position:fixed;//固定定位
    top:46px; // 跟在顶部固定导航条的下方
    left:0px;
    right:30px; 
    // 标记当前选中频道的下划线
    .van-tabs__line {
        width: 30px !important;
        background-color: #3296fa;
        bottom: 20px;
      }
    }
    .van-tabs__content {
    flex:1;
    overflow: hidden;
    padding-bottom: 4rem;  // 能看到文章列表中的loading效果(转圈)
    .van-tab__pane{ 
        height: 100%;
        // .scroll-wrapper 是home/ArticleList.vue组件的根元素的类名
        .scroll-wrapper{
        overflow:auto;
        height: 100%;
        }
    }
    }
 }
}
#app /deep/ .van-nav-bar__left  .van-icon  {
    color: #fff;
}